import React, { Component } from 'react';

import './Tabbar.scss'

class Tabbar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            active: "home",
            activeState: {
                home: "/home",
                catgory: "/catgory",
                cart: "/cart",
                my: "/my"
            }
        }
    }

    handleClick = (active) => {
        this.setState({
            active: active
        });
        this.props.history.push(this.state.activeState[active])
    }

    componentDidMount() {
        // console.log("执行啦");
        // console.log(this.props.match.path.split("/")[1]);
        this.setState({
            active: this.props.match.path.split("/")[1]
        })
        /* 监听hash变化 */
        window.addEventListener("hashchange", this.handleHashChange);
    }
    handleHashChange = () => {
        let activeTab = this.props.match.url.split("/")[1];
        this.setState({
            active: activeTab,
        })
    }
    componentWillUnmount() {
        /* 销毁监听事件 */
        window.addEventListener("hashchange", this.handleHashChange);
    }


    render() {
        return (
            <div className="main">
                <div className="centent">
                    {this.props.children}
                </div>

                <div className="tabarBox">
                    <div className="tabbarItme" onClick={this.handleClick.bind(this, "home")}>
                        <i className={this.state.active === "home" ? "icon icon-home-o" : "icon icon-home"}></i>
                        <p className={this.state.active === "home" ? "title" : ""}>首页</p>
                    </div>
                    <div className="tabbarItme" onClick={this.handleClick.bind(this, "catgory")}>
                        <i className={this.state.active === "catgory" ? "icon icon-community-o" : "icon icon-community"}></i>
                        <p className={this.state.active === "catgory" ? "title" : ""}>社区</p>
                    </div>
                    <div className="tabbarItme" onClick={this.handleClick.bind(this, "cart")}>
                        <i className={this.state.active === "cart" ? "icon icon-cart-o" : "icon icon-cart"}></i>
                        <p className={this.state.active === "cart" ? "title" : ""}>购物车</p>
                    </div>
                    <div className="tabbarItme" onClick={this.handleClick.bind(this, "my")}>
                        <i className={this.state.active === "my" ? "icon icon-my-o" : "icon icon-my"}></i>
                        <p className={this.state.active === "my" ? "title" : ""}>我的</p>
                    </div>
                </div>
            </div>
        );
    }
}

export default Tabbar;
